
header
	position: relative
	height: 50px

nav
	position: fixed
	width: 100%
	height: 50px
	background-color: #212121
	z-index: 5

.hamburger
	display: none

.menu
	display: flex
	justify-content: space-between
	padding: 13px 70px
	margin: 0
	list-style-type: none
	&_link
		color: #ffffff
		font-size: 15px
		font-weight: 300
		&:hover
			text-decoration: none
			color: $main-color
	&_item
		border-right: 2px dotted black
		padding-right: 28px
		&:last-child
			border-right: none

.subheader
	position: absolute
	top: 50px
	width: 100%
	height: 84px
	background-color: rgba(0, 0, 0, 0.6)
	&_logo
		display: block
		max-width: 100%
		margin-top: 16px
	&_official
		margin-top: 6px
		opacity: 0.5
		color: #ffffff
		font-size: 13px
		font-weight: 400
	&_call
		color: #ffffff
		font-size: 12px
		font-weight: 300
		margin-top: 19px
		text-align: right
	&_phone
		display: block
		margin-top: 8px
		color: #ffffff
		font-size: 22px
		font-weight: 400
		text-transform: uppercase
		text-align: right
		line-height: 12px
		&:hover
			text-decoration: none
			color: #fff
	&_btn
		margin-top: 19px
		width: 172px
		height: 46px
		box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12)
		border: none
		border-radius: 4px
		background-image: linear-gradient(to top, $main-color 0%, #4ce2ff 100%)
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.21)
		color: #ffffff
		font-size: 14px
		font-weight: 400
		text-transform: uppercase
		+btn_hover


.promo
	min-height: 800px
	background: url('../img/bg/main_bg.jpg') center (center / cover) no-repeat
	padding: 150px 0 135px 0
	&_header
		color: #ffffff
		font-weight: 700
		text-transform: uppercase
		font-size: 60px
		line-height: 60px
		margin: 0
		text-align: center
	&_subheader
		color: #ffffff
		font-weight: 700
		text-transform: uppercase
		font-size: 36px
		line-height: 36px
		margin: 0
		margin-top: 22px
		text-align: center
	&_descr
		color: #ffffff
		font-size: 18px
		font-weight: 400
		line-height: 24px
		text-align: center
		margin-top: 23px
	&_btn
		display: block
		margin: 118px auto 0 auto
		width: 259px
		height: 63px
		box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12)
		border: none
		border-radius: 4px
		background-image: linear-gradient(to top, $main-color 0%, #4ce2ff 100%)
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.21)
		color: #ffffff
		font-size: 18px
		font-weight: 400
		text-transform: uppercase
		+btn_hover

.reasons
	padding: 71px 0 65px 0
	&_block
		display: flex
		justify-content: center
		align-items: center
		margin-top: 35px
	&_round
		display: flex
		justify-content: center
		align-items: center
		margin-right: 26px
		width: 113px
		height: 113px
		background-color: $main-color
		border-radius: 100%
	&_descr
		width: 343px
	&_subtitle
		line-height: 21px
		color: $main-color
		font-size: 17px
		font-weight: 400
	&_text
		color: #202020
		font-size: 15px
		font-weight: 300
		line-height: 21px

.label
	position: relative
	margin: 0 auto
	height: 24px
	width: 112px
	padding: 5px 12px
	background-color: #000000
	color: #ffffff
	font-size: 11px
	font-weight: 300
	text-transform: uppercase
	text-align: center
	z-index: 2
	&_white 
		background-color: #fff
		color: #000
	&_min 
		width: 76px

.title
	position: relative
	margin-bottom: 0
	margin-top: 38px
	color: #222222
	font-size: 38px
	line-height: 38px
	font-weight: 700
	text-transform: uppercase
	text-align: center
	z-index: 2
	&_white 
		color: #fff

.subtitle
	position: relative
	margin-top: 19px
	color: #222222
	font-size: 17px
	font-weight: 400
	text-align: center
	z-index: 2
	&_white 
		color: #fff

	
.mobile 
	min-height: 864px
	padding: 48px 0 79px 0
	background: url('../img/bg/mobile_app.png') center (center / cover) no-repeat
	.row 
		margin-top: 32px
	&_item 
		position: relative
		width: 320px
		height: 280px
		margin: 0 auto
		margin-bottom: 19px
		padding-top: 92px
		&_1
			background: url('../img/bg/mobile_screen_1.jpg') center (center / cover) no-repeat
		&_2
			background: url('../img/bg/mobile_screen_2.jpg') center (center / cover) no-repeat
		&_3
			background: url('../img/bg/mobile_screen_3.jpg') center (center / cover) no-repeat
		&_4
			background: url('../img/bg/mobile_screen_4.jpg') center (center / cover) no-repeat
		&_5
			background: url('../img/bg/mobile_screen_5.jpg') center (center / cover) no-repeat
		&_6
			background: url('../img/bg/mobile_screen_6.jpg') center (center / cover) no-repeat
		&_subtitle
			color: #ffffff
			font-size: 24px
			font-weight: 400
			line-height: 31px
			text-transform: uppercase
			text-align: center
		&_plus
			display: flex 
			justify-content: center
			align-items: center
			position: absolute
			bottom: 35px
			left: 50%
			transform: translateX(-50%)
			width: 26px
			height: 26px
			background-color: #000000
			margin: 0 auto
			border-radius: 100%
			cursor: pointer
			&:before
				content: ''
				display: block
				width: 14px 
				height: 2px 
				background-color: $main-color
				transition: 0.3s all
			&:after 
				content: ''
				position: absolute 
				left: 50%
				transform: translateX(-50%)
				display: block 
				height: 14px
				width: 2px
				background-color: $main-color
				transition: 0.3s all
			&:hover 
				&:before, &:after 
					background-color: $second-color


.choice 
	position: relative
	min-height: 895px
	padding: 57px 0 138px 0
	background: url('../img/bg/mobile_app.png') center (center / cover) no-repeat
	&_img 
		position: relative
		display: block
		margin: 56px auto 0 auto
		z-index: 2
	&_descr 
		text-align: center
		color: #222222
		font-size: 17px
		font-weight: 300
		line-height: 24px
	.black 
		position: absolute 
		top: 0
		left: 0
		height: 499px
		width: 100%
		background-color: #070716
		z-index: 1

.require
	padding: 68px 0 84px 0
	&_block 
		margin: 33px 0
		&_nmb
			margin-bottom: 0px
	&_title 
		color: #1ca8c3
		font-size: 22px
		font-weight: 400
	&_list 
		list-style-type: none
		padding-left: 50px
		margin-top: 22px
		li 
			position: relative
			font-size: 17px
			font-weight: 300
			line-height: 24px
			margin-bottom: 10px
			&:before 
				content: ''
				display: block 
				position: absolute
				left: -32px
				top: 3px
				width: 21px 
				height: 20px
				background: url('../icons/check_blue.svg') center (center / cover) no-repeat
	&_descr 
		margin-top: 25px
		font-size: 17px
		font-weight: 300
		line-height: 24px
		color: #1ca8c3
	.warning 
		.require_title
			color: $second-color
		.require_list
			li 
				&:before
					background: url('../icons/check_red.svg') center (center / cover) no-repeat
.world 
	position: relative
	min-height: 717px
	padding: 49px 0
	background: url('../img/bg/map.jpg') center (center / cover) no-repeat
	&_link 
		position: absolute
		left: 50%
		transform: translateX(-50%)
		bottom: 49px
		text-align: center
		font-size: 15px
		font-weight: 400
		line-height: 68px
		text-transform: uppercase
		color: #1fbad6
		&:hover 
			text-decoration: none
			color: #fff
footer 
	padding: 14px 23px 39px 23px
	a 
		&:hover 
			text-decoration: none
.footer
	&_divider
		width: 299px
		height: 4px
		background-color: #1fbad6
		margin: 0 auto
	&_wrapper
		display: flex 
		justify-content: space-between
		align-items: flex-start
		padding-top: 32px
	&_wrapper > div 
		width: 33%
		&:nth-child(3)
			display: flex 
			justify-content: flex-end
	&_social
		width: 160px
		display: flex
		justify-content: space-between
		&_item 
			display: flex 
			justify-content: center
			align-items: center
			margin: 0 4px 
			width: 32px
			height: 32px
			background-color: #070716
			border-radius: 100%
			i 
				color: #fff
	&_links
		width: 390px
		margin: 0 auto
		&_main 
			display: flex 
			justify-content: space-between
			padding: 0 10px
			a 
				color: #070716
				font-size: 15px
				font-weight: 300
				text-transform: uppercase
		&_sub 
			display: flex 
			justify-content: space-between
			margin-top: 10px
			a 
				color: #999999
				font-size: 11px
				font-weight: 300
				text-transform: uppercase
		&_lang 
			display: block 
			margin: 0 auto
			color: #1fbad6
			font-size: 11px
			font-weight: 400
			margin-top: 19px
			text-transform: uppercase
			text-align: center
.xs-visible 
	display: none